<template>
    <div class="businessTable-style">
        <timeChange
            @clickTime="clickType"
            :duringTIme="2000"
            :openCycle="false"
            :btnTitle="['队伍竞赛看板', '小组竞赛看板']"
        ></timeChange>
        <timeChange
            @clickTime="clickType1"
            :duringTIme="2000"
            :openCycle="false"
            :btnTitle="['产品A', '产品B', '产品C', '产品D', '产品E']"
            :isRadioButton="true"
            class="group-tab"
        ></timeChange>
        <div class="top-list">
            <div class="top-item gary-bg">
                <img src="../../../assets/img/icon1.png" width="20" height="20"/>
                <div class="name">
                    牡丹江整体
                </div>
                <div class="progress-box">
                    <progressBar :progress="70" backgroundColor="rgba(10,231,190)" class="progress" :bg="'#ddd'"/>
                </div>
                <img src="../../../assets/img/icon2.png" width="24" height="24"/>
                <div class="progress-text">
                    完成率：77.77%
                </div>
                <div class="progress-text">
                    发展量：85%
                </div>
            </div>
            <div class="top-item" v-for="item,i in topList" :key="i">
                <img :src="require(`../../../assets/img/top${i+1}.png`)" width="20" height="20" v-if="i < 3"/>
                <div class="num" v-else>{{ i+1 }}</div>
                <div class="name">
                    {{ item.name }}
                </div>
                <div class="progress-box">
                    <progressBar :progress="70" :backgroundColor="i < 3 ? '#0b82fe' : '#ffa944'" class="progress" :bg="'#ddd'"/>
                </div>
                <img src="../../../assets/img/icon2.png" width="24" height="24"/>
                <div class="progress-text">
                    完成率：77.77%
                </div>
                <div class="progress-text">
                    发展量：85%
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import timeChange from '@/components/timeChange';
    import progressBar from "@/components/progressBar";
    export default {
        name: "businessTable",
        components: {
            timeChange,
            progressBar
        },
        data() {
            return {
                changeType: 1,
                changeType1: 1,
                topList: [
                    {name: '商科中心'},
                    {name: '绥芬河'},
                    {name: '海林'},
                    {name: '宁安'},
                    {name: '穆宁'},
                    {name: '东宁'},
                    {name: '林口'}
                ]
            }
        },
        methods: {
            clickType(type) {
                this.changeType =  type
                console.log(this.changeType)
            },
            clickType1(type) {
                this.changeType1 =  type
                console.log(this.changeType)
            },
        }
    }
</script>
<style scoped lang="less">
.businessTable-style {
    width: 100%;
    height: 380px;
    margin-top: 40px;
    overflow: hidden;
    position: relative;
}
.group-tab{
    margin-top: 40px;
}
.top-list{
    margin-top: 82px;
    .top-item{
        display: flex;
        height: 36px;
        line-height: 36px;
        border-bottom: 1px solid #ccc;
        .name{
            width: 100px;
        }
        .progress-box{
            width: 320px;
            .progress{
                height: 12px;
                width: 320px;
                margin-top: 13px;
            }
        }
        div {
            margin: 0 8px;
        }
        img{
            margin: 8px 10px;
        }
        .num{
            color: #fff;
            background: #0b82ff;
            border-radius: 100px;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            margin: 8px 10px;
        }
        .progress-text{
            width: 140px;
        }
    }
}
.gary-bg{
    background: #f2f2f2;
}
</style>